import React,{createRef}from "react";
import Child from "./child"
import ForwardRef from "./forwardRef"
class Index extends React.Component{
  constructor(props){
    super(props)
    this.domRef = createRef()
    this.childRef = createRef()
    this.inputRef = createRef()
  }
  componentDidMount(){
    console.log("domRef",this.domRef)
  }
  handleClick = ()=>{
    console.log(this.domRef.current)
    console.log(this.childRef.current)
    this.childRef.current.handleClick()
    console.log(this.inputRef.current)
  }
  render(){
    return(
      <>
        <h1 ref={this.domRef}>this is refIndex</h1>
        <button onClick={this.handleClick}>clickIndexEl</button>
        <Child ref={this.childRef}></Child>
        <ForwardRef ref={this.inputRef}></ForwardRef>
      </>
    )
  }
}
export default Index
